<template>
  <div class="app-layout" :class="{ 'sidebar-open': isSidebarOpen }">
    <div class="mobile-header">
      <button class="menu-toggle" @click="toggleSidebar">
        <i class="icon-menu"></i>
      </button>
    </div>
    <Sidebar 
      @menuClick="handleMenuClick" 
      :class="{ 'mobile-sidebar': true }"
    />
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Sidebar from '../components/Sidebar.vue'

const isSidebarOpen = ref(false)

const toggleSidebar = () => {
  isSidebarOpen.value = !isSidebarOpen.value
}

const handleMenuClick = (menuType) => {
  console.log('Menu clicked:', menuType)
  // 在移动端点击菜单项后关闭侧边栏
  if (window.innerWidth <= 768) {
    isSidebarOpen.value = false
  }
}
</script>

<style scoped>
.app-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: #f5f7fa;
  position: relative;
  overflow: hidden;
}

.main-content {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  padding: 20px;
  position: relative;
}

.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #fff;
  padding: 0 20px;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.menu-toggle {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
}

@media (max-width: 768px) {
  .app-layout {
    height: 100%;
    width: 100%;
  }

  .mobile-header {
    display: flex;
  }

  .main-content {
    height: calc(100vh - 60px);
    margin-top: 60px;
    padding: 15px;
  }

  .mobile-sidebar {
    position: fixed;
    left: -250px;
    top: 60px;
    height: calc(100vh - 60px);
    transition: transform 0.3s ease;
    z-index: 99;
  }

  .sidebar-open .mobile-sidebar {
    transform: translateX(250px);
  }
}
</style> 